<template>
  <view>
    <view class="u-p-t-20 u-m-l-30">
      <up-row>
        <view @click="toHistory">
          <view class="u-p-10 u-border u-p-l-20 u-p-r-20" style="border-radius: 40px; background-color: #f4f4f4;">
            <u-row align="center">
              <uni-icons customPrefix="iconfont" type="icon-time" :color="$u.color.mainColor" size="18px" style="position: relative; top: 1px;"></uni-icons>
              <up-text text="历史记录" class="u-m-l-5"></up-text>
            </u-row>
          </view>
        </view>
        <view @click="toOrder" class="u-m-l-20">
          <view class="u-p-10 u-border u-p-l-20 u-p-r-20" style="border-radius: 40px; background-color: #f4f4f4;">
            <u-row align="center">
              <uni-icons customPrefix="iconfont" type="icon-list" :color="$u.color.mainColor" size="18px" style="position: relative; top: 1px;"></uni-icons>
              <up-text text="我的订单" class="u-m-l-5"></up-text>
            </u-row>
          </view>
        </view>
      </up-row>
    </view>

    <view class="classify-content u-m-t-30">
      <view class="classify" @click="toClassify(item)" v-for="(item, index) in categoryList" :key="index">
        <view class="classify-img">
          <image :src="item.avatar" style="width: 144rpx; height: 144rpx; border-radius: 50%;" mode="aspectFill" />
        </view>
        <view class="classify-txt u-tips-color">{{item.text || '未知'}}</view>
      </view>
      <view class="classify" @click="toClassify">
        <view class="classify-img">
          <uni-icons
              customPrefix="iconfont"
              type="icon-more"
              :color="$u.color.tipsColor"
              size="32px"
              style="top: 40rpx; position: relative;"
          ></uni-icons>
        </view>
        <view class="classify-txt u-tips-color">更多</view>
      </view>
    </view>
    
    <view>
      <seckillBar />
    </view>

    <view class="m-15">
      <view class="flex-block" style="align-items: center;">
        <u-row align="center" class="p-r-10">
          <uni-icons customPrefix="iconfont" type="icon-goodsnewfill" :color="$u.color.contentColor" size="22px"></uni-icons>
          <up-text text="新品" class="u-m-l-5"></up-text>
        </u-row>
      </view>
    </view>

    <view class="u-p-l-30">
      <up-scroll-list :indicatorActiveColor="$u.color.mainColor">
        <view class="sales-item u-p-t-5 u-p-b-25" v-for="(item, index) in newList" :key="index">
          <goodsItem type="vertical" :data="item" />
        </view>
      </up-scroll-list>
    </view>

    <view class="m-15">
      <view class="flex-block" style="align-items: center;">
        <u-row align="center" class="p-r-10">
          <uni-icons customPrefix="iconfont" type="icon-hotfill" :color="$u.color.contentColor" size="22px"></uni-icons>
          <up-text text="热销" class="u-m-l-5"></up-text>
        </u-row>
      </view>
    </view>
    <view class="u-p-l-30">
      <up-scroll-list :indicatorActiveColor="$u.color.mainColor">
        <view class="sales-item u-p-t-5 u-p-b-25" v-for="(item, index) in hotList" :key="index">
          <goodsItem type="vertical" :data="item" />
        </view>
      </up-scroll-list>
      </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { goods } from '@/utils/api'
import goodsItem from "@/components/goods-item/goods-item.vue";
import seckillBar from '@/components/seckill-bar/seckill-bar'
 
const safeTop = ref(0)
const inputValue = ref('')
const categoryList = ref([])
const newList = ref([])
const hotList = ref([])
const recommendList = ref([])

onMounted(() => {
  init()
})

async function init() {
  let { data } = await goods.categorys()
  categoryList.value = data

  let params = {
    "pageIndex": 1,
    "pageSize": 15,
  }
  let res1 = await goods.getByCategory({
    ...params,
    isNew: true
  })
  newList.value = res1.data?.items || []
  let res2 = await goods.getByCategory({
    ...params,
    isHot: true
  })
  hotList.value = res2.data?.items || []
}
function toClassify(item) {
  uni.navigateTo({
    url: '/pages/classify/classify?id=' + (item.value || '')
  })
}
function toHistory() {
  uni.navigateTo({
    url: '/pages/history/history'
  })
}
function toOrder() {
  uni.navigateTo({
    url: '/pages/order/order'
  })
}
function toInfo(item) {
  uni.navigateTo({ url: '/pages/goods-info/goods-info?id=' +item.id })
}
function handleSearch() {
  uni.navigateTo({
    url: '/pages/search/search?keyword=' + inputValue.value
  })
}
</script>

<style lang="stylus" scoped>
.classify-content
  white-space: nowrap
  overflow-x: scroll
  padding 0 15px
.classify
  width: 144rpx
  height: auto
  text-align: center
  display: inline-block
  margin-right 20px
  &-img
    width: 144rpx
    height: 144rpx
    background: #f4f4f4
    border-radius: 50%
  &-txt
    margin-top: 10px

.sales-item
  flex-basis 164px
  flex-grow: 0;     /* 防止子元素被拉伸 */
  flex-shrink: 0;   /* 防止子元素被压缩 */
  height auto
  padding-right 30rpx

.header-bg
  background: #ffffff
</style>
